<template>
	<view class="charts-box">
		<qiun-data-charts inScrollView :canvas2d="true" type="area" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				color: ['#ff9e00', '#83c7ee'],
				padding: [15, 10, 0, 0],
				enableScroll: false,
				legend: { show: false },
				xAxis: {
					disableGrid: true,
					format: 'xAxisDay',
					labelCount: 7, //默认显示个数
					gridEval: 2
				},
				yAxis: {
					disableGrid: false,
					gridType: 'dash',
					dashLength: 2,
					data: [
						{
							min: 40,
							max: 240
						}
					]
				},
				extra: {
					line: {
						type: 'straight',
						width: 2,
						activeType: 'hollow'
					},
					area: {
						type: 'curve',
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: true,
						activeType: 'hollow'
					}
					// markLine: {
					// 	type: 'dash',
					// 	data: [
					// 		{
					// 			value: 101,
					// 			showLabel: true,
					// 			labelText: '目标',
					// 			lineColor: '#36B7AB'
					// 		}
					// 	]
					// }
				}
			}
		};
	},
	onReady() {},
	methods: {
		getServerData(categories, series, xAxisFormat, labelCount) {
			let res = {
				categories: categories,
				series: series
			};
			this.opts.xAxis.format = xAxisFormat;
			this.opts.xAxis.labelCount = labelCount || 7;
			this.chartData = JSON.parse(JSON.stringify(res));
		}
	}
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
	width: 100%;
	height: 300px;
	margin-top: 30upx;
}
</style>
